<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model
        ref="form"
        :model="model"
        :rules="rules"
        slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="主标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mainTitle">
              <a-input v-model="model.mainTitle" placeholder="请输入主标题" ></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="所属单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="viceTitle">
              <a-input v-model="model.viceTitle" placeholder="请输入副标题" ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="新闻类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="newsType">
              <j-dict-select-tag
                v-model="model.newsType"
                title="新闻类型"
                dictCode="new_type"
                @change="newsTypeChange"
                placeholder="请选择新闻类型"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="新闻属性" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="newsProperties">
              <j-dict-select-tag
                v-model="model.newsProperties"
                title="新闻属性"
                dictCode="news_attributes"
                @change="newsPropertiesChange"
                placeholder="请选择新闻属性"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="排序值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sortNum">
              <a-input-number v-model="model.sortNum" placeholder="请输入排序值" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="显示状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="showStatus">
              <j-dict-select-tag
                v-model="model.showStatus"
                title="显示状态"
                dictCode="show_flag"
                placeholder="请选择显示状态"/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remarks">
              <a-input v-model="model.remarks" placeholder="请输入备注" ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="主图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mainImage">
              <j-image-upload class="avatar-uploader" bizPath="news" text="添加主图" v-model="model.mainImage" ></j-image-upload>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row v-if="!formDisabled">
          <a-col :span="24">
            <a-form-model-item label="内容" prop="content">
              <!-- JEditor -->
              <j-editor v-model="model.content" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
      <a-row v-if="formDisabled">
        <a-col :span="24">
            <j-editor v-model="model.content" />
        </a-col>
      </a-row>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'MipCommonNewsForm',
    components: {
    },
    props: {
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model: {
            showStatus: '1'
         },
        labelCol: {
          xs: { span: 12 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        url: {
          add: '/mipCommonNews/add',
          edit: '/mipCommonNews/edit',
          queryById: '/mipCommonNews/queryById'
        },
        labelClass: {
          xs: { span: 9 },
          sm: { span: 3 }
        },
         rules: {
            mainTitle: [
              { required: true, message: '主标题不能为空', trigger: 'blur' }
            ],
            viceTitle: [
              { required: true, message: '所属单位不能为空', trigger: 'blur' }
            ],
            newsType: [{ required: true, message: '新闻类型不能为空', trigger: 'blur' }],
            newsProperties: [{ required: true, message: '新闻属性不能为空', trigger: 'blur' }],
            sortNum: [
              { required: true, message: '排序不能为空', trigger: 'blur' }
            ],
            mainImage: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
            content: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
            showStatus: [{ required: true, message: '显示状态不能为空', trigger: 'blur' }]
          }

      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      }
    },
    created () {
       // 备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model))
    },
    methods: {

      // 类型
      newsTypeChange(val) {
        console.log('select checked', val)
        console.log('modle newsType', this.model.newsType)
      },
      // 属性
      newsPropertiesChange(e) {
         console.log('select checked', e)
         console.log('modle newsProperties', this.model.newsProperties)
      },
      // 显示状态
      onRadio(e) {
         console.log('radio checked', e.target.value)
      },
      add () {
        this.modelDefault.viceTitle = '中国城市建设研究院有限公司';
        this.edit(this.modelDefault)
      },
      edit (record) {
        this.model = Object.assign({}, record)
        this.visible = true
      },
      submitForm () {
        const that = this
         console.log('this.model', this.model)
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
               method = 'put'
            }
            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
            })
          }
        })
      }
    }
  }
</script>
<style>

</style>
